<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>后端页面</title>
    <link rel="stylesheet" href="css/index.css" />
    <script src="vue.js"></script>
    <script src="axios.js"></script>
    <script src="elementui.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<style scoped>
    .el-header {
      background-color: #409EFF;
      color: white;
      text-align: center;
      line-height: 60px;
    }
    
    .box-card .text {
      text-align: center;
    }
    
    .el-aside {
      background-color: #f4f4f4;
    }
    
    .el-main {
      background-color: #fff;
    }
    
    .el-table {
      margin-top: 20px;
    }
    </style>
<body> 
    <div id="app">
        <template>
            <el-container style="height: 100vh;">
              <!-- 左侧菜单栏 -->
              <el-aside width="200px" style="background-color: #f4f4f4;">
                <el-menu default-active="1" class="el-menu-vertical-demo" style="height: 100%; border-right: none;">
                  <el-menu-item index="1">主页</el-menu-item>
                  
                  <!-- 用户管理 -->
                  <el-submenu index="2">
                    <template #title>用户管理</template>
                    <el-menu-item index="2-1">用户列表</el-menu-item>
                    <el-menu-item index="2-2">角色管理</el-menu-item>
                  </el-submenu>
                  
                  <!-- 订单管理 -->
                  <el-submenu index="3">
                    <template #title>订单管理</template>
                    <el-menu-item index="3-1">订单列表</el-menu-item>
                    <el-menu-item index="3-2">退款管理</el-menu-item>
                  </el-submenu>
                  
                  <!-- 商品管理 -->
                  <el-submenu index="4">
                    <template #title>商品管理</template>
                    <el-menu-item index="4-1">商品列表</el-menu-item>
                    <el-menu-item index="4-2">分类管理</el-menu-item>
                  </el-submenu>
                  
                </el-menu>
              </el-aside>
          
              <!-- 主内容区 -->
              <el-container>
                <!-- 顶部导航栏 -->
                <el-header style="background-color: #409EFF; color: white; line-height: 60px;">
                  <span>后台管理系统</span>
                </el-header>
          
                <!-- 主内容区域 -->
                <el-main style="padding: 20px; overflow: auto;">
                  <el-card class="box-card">
                    <div slot="header" class="clearfix">
                      <span>主页</span>
                    </div>
                    <div class="text">
                      <p>欢迎来到后台管理系统！</p>
                    </div>
                  </el-card>
                </el-main>
                
              </el-container>
            </el-container>
          </template>
          
    </div>
</body>
<script>
    new Vue({
        el: '#app',
        data: {
           
            
        },
        methods: {
            navigateTo(path) {
                this.$router.push(path);
            }
        }
    });
</script>

</html>